<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>Selectores</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="script/jquery-1.11.0.min.js"></script>
        <script>
            $(document).on('ready', function(){
                //A todo los elemetos div le pongo el color azul de fondo
                $('div').css({
                     'background-color':'blue'
                });
                
                //Cuando hago click en el botón id=cambio-color01 se cambia 
                //el color de fondo de todos los div que tengan la clase miDiv
                $('#cambio-color01').on('click', function(){
                    $('div.miDiv').css({
                        'background-color':'red'
                    });
                });
                
                //Cuando se clickea el botón id=cambio-article01 se cambia el texto
                //el parrafo del article del div con class miDiv
                $('#cambio-article01').on('click', function(){
                    $('div.miDiv #articulo01 p').html('cambie el p del article 02');
                });
                
                //cambiamo el texto de todos lo párrafos de todos los divs.
                $('#cambiar-texto-article02').on('click', function(){
                    $('div article p').text('me cambiaste el texto loco');
                });
            });
        </script>
        <style>
            .miDiv{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="miDiv">
            <article id="articulo01">
                <p>Hola JQuery. Si clickeas acá cambias el texto del p
                    <button id="cambio-article01">Cambiar texto</button>
                </p>
            </article>
        </div>
        
        <div id="div02">
            <article id="articulo02">
                <p>
                    El curso de código facilito
                </p>
            </article>
        </div>
        
        <div>
            <button id="cambio-color01">Cambiar Color miDiv</button>
            <button id="cambiar-texto-article02">cambiar article02</button>
        </div>
    </body>
</html>
